import {Component, OnInit,ChangeDetectionStrategy,ChangeDetectorRef} from '@angular/core';
import {MatDialog} from "@angular/material";
import {DoCheck} from "@angular/core"
import {NewProjectComponent} from "../new-project/new-project.component";
import {InviteComponent} from "../invite/invite.component";
import {ConfirmDialogComponent} from "../../share/confirm-dialog/confirm-dialog.component";
import * as lodash from "lodash";
import {Store,select} from "@ngrx/store";
import * as fromRoot from "../../reducers";
import * as actions from "../../actions/project.action";
import {Project} from "../../domain/project.model";
import {filter,switchMap,map,take} from "rxjs/operators";
import { Observable } from 'rxjs';
@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss'],
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class ProjectListComponent implements OnInit,DoCheck {
  dark:boolean = false;
  projects$:Observable<Project[]>;
  listAnim$:Observable<number>;
  constructor(
    private dialog:MatDialog,
    private cd:ChangeDetectorRef,
    private store$:Store<fromRoot.State>    
  ) {
    this.store$.dispatch(new actions.LoadAction(null));
    this.projects$ = this.store$.select(fromRoot.getProjects);
    this.listAnim$ = this.projects$.pipe(map(p => p.length));
  }
  ngOnInit() {
  }
  openNewProjectDialog(){
    const selectedImg = `assets/img/items/${Math.floor(Math.random()*8+1)}.png`;
    const dialogRef = this.dialog.open(NewProjectComponent,{data:{thumbnails:this.getThumbnails(),img:selectedImg}});
    dialogRef.afterClosed().pipe(
      take(1),
      filter(n=>n),
      map(val=>({...val,coverImg:this.buildImgSrc(val.coverImg)}))
    ).subscribe(
      project=>{
        // this.projects = [...this.projects,project];
        this.store$.dispatch(new actions.AddAction(project));
        // this.cd.markForCheck;
      })
  }
  launchInviteDialog(project:Project){
    this.store$.pipe(
      select(fromRoot.getProjectUsers(project.id)),
      map(
        users=>{
        console.log(users);
        return this.dialog.open(InviteComponent,{data:{members:users}})
        }
        ),
      switchMap(dialogRef=>dialogRef.afterClosed()),
      take(1),
      filter(n=>n)
    ).subscribe(val => this.store$.dispatch(new actions.InviteAction( {projectId: project.id, members: val})));
  }
  launchUpdateDialog(project:Project){
    const selectedImg = `assets/img/items/${Math.floor(Math.random()*9)}.png`;
    const dialogRef = this.dialog.open(NewProjectComponent,{data:{thumbnails:this.getThumbnails(),project:project}});
    dialogRef.afterClosed().pipe(
      take(1),
      filter(n=>n),
      map(val=>({...val,id:project.id,coverImg:this.buildImgSrc(val.coverImg)}))
    ).subscribe(
      project=>{
        // const index = this.projects.map(d=>d.id).indexOf(project.id);
        // this.projects =[...this.projects.slice(0,index),project,...this.projects.slice(index+1)]
        // this.cd.markForCheck;
        this.store$.dispatch(new actions.UpdateAction(project));
      })
  }
  launchConfirmDialog(project:Project){
    const dialogRef = this.dialog.open(ConfirmDialogComponent,{data:{title:'提示',content:'确定要删除吗?'}});
    dialogRef.afterClosed().subscribe(data=>console.log(data))
    dialogRef.afterClosed().pipe(
      take(1),
      filter(
        n=>{console.log(n);return n}
      )
      // switchMap(
      //   _=>this.projectService.del(project))
    ).subscribe(
      _=>{
        // this.projects = this.projects.filter(p=>p.id!==prj.id);
        // this.cd.markForCheck;
        this.store$.dispatch(new actions.DeleteAction(project));
      });
  }
  ngDoCheck(){
    console.log('projectlist'+'本组件变更检测完毕')
  }
  selectProject(project: Project) {
    this.store$.dispatch(new actions.SelectProjectAction(project));
  }
  private getThumbnails(){
    return lodash.range(0,8).map(i=>`assets/img/items/${++i}.png`)
  }
  private buildImgSrc(img:string):string{
    return img.indexOf('_')>-1?img.split("_")[0]+'.png':img;
  }
}
